<template>
  <view class="con">
    <template v-if="list.length > 0">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="l">
          <view>{{ levelInfo[item?.level] }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
        <view class="r">￥{{ item.actualAmount.toFixed(2) }} </view>
      </view>
    </template>
    <view v-else style="width: 100%; display: flex; justify-content: center">
      <u-empty mode="list"></u-empty>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getVipRecord } from "@/api/my";
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
import { onMounted, ref } from "vue";
onMounted(() => {
  getList();
});
const levelInfo: any = {
  "1": "白银",
  "2": "黄金",
  "3": "白金",
};
const pageStatus = ref("loadmore");
const page = ref(1);
const list = ref<any[]>([]);
const getList = async () => {
  if (pageStatus.value == "nomore") {
    return;
  }
  pageStatus.value = "loadmore";
  const res: any = await getVipRecord({
    pageNum: page.value,
  });
  list.value = list.value.concat(res.rows);
  if (list.value.length >= (res.total as number)) {
    pageStatus.value = "nomore";
  } else {
    pageStatus.value = "loadmore";
  }
};
onReachBottom(() => {
  page.value++;
  getList();
});
</script>
<style lang="less" scoped>
.con {
  height: 80vh;
  background: #fff;
  padding: 0 46rpx;
  margin-top: 20rpx;
}
.item {
  padding: 40rpx 0;
  border-bottom: 1rpx solid #f9f9f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .l {
    font-size: 28rpx;
    color: #000000;
    .time {
      font-size: 24rpx;
      color: #767676;
      margin-top: 16rpx;
    }
  }
  .r {
    font-weight: 700;
    font-size: 30rpx;
    color: #ea0000;
  }
}
</style>
